<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.replaceitTitle" class="filter-item" style="width: 200px;" placeholder="请输入任务名" @keyup.enter.native="handleFilter"/>
      <el-select v-model="listQuery.status" class="filter-item" clearable placeholder="全部状态">
        <el-option v-for="item in optStatus" :key="item.id" :label="item.text" :value="item.id" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
    </div>
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="edit" @click="handleCreate">添加</el-button>
    </div>
    <el-table v-loading.body="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="max-width:1200px; width: 100%">
      <el-table-column width="80" align="center" label="编号" > <template slot-scope="scope">
        <span>{{ scope.row.replaceitId }}</span>
      </template> </el-table-column>
      <el-table-column width="120" align="center" label="名称"> <template slot-scope="scope">
        <span>{{ scope.row.replaceitTitle }}</span>
      </template> </el-table-column>
      <el-table-column width="120" align="center" label="描述"> <template slot-scope="scope">
        <span>{{ scope.row.replaceitDesc }}</span>
      </template> </el-table-column>
      <el-table-column width="120" align="center" label="英文名称"> <template slot-scope="scope">
        <span>{{ scope.row.replaceitTitleEn }}</span>
      </template> </el-table-column>
      <el-table-column width="120" align="center" label="英文描述"> <template slot-scope="scope">
        <span>{{ scope.row.replaceitDescEn }}</span>
      </template> </el-table-column>
      <el-table-column width="80" align="center" label="奖励积分"> <template slot-scope="scope">
        <span>{{ scope.row.replaceitScore }}</span>
      </template> </el-table-column>
      <el-table-column width="120" align="center" label="任务周期"> <template slot-scope="scope">
        <span>{{ descPeriod[scope.row.missonPeriod] }}</span>
      </template> </el-table-column>
      <el-table-column width="120" align="center" label="任务事件"> <template slot-scope="scope">
        <span>{{ scope.row.replaceitPoint }}</span>
      </template> </el-table-column>
      <el-table-column :render-header="renderHeaderGXSH" align="center"> <template slot-scope="scope">
        <div>{{ scope.row.createUser ? scope.row.createUser : '-' }}</div>
        <div>{{ scope.row.createTime ? genTimeDesc(scope.row.createTime) : '-' }}</div>
      </template> </el-table-column>
      <el-table-column width="120" align="center" label="状态"> <template slot-scope="scope">
        <span>{{ scope.row.status===0 ? '启用' : '禁用' }}</span>
      </template> </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">查看
          </el-button>
          <el-button type="text" @click="handleUpdate(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <label class="dialogDetailDescLabel">基本信息</label>
        <el-form-item style="margin-top:10px;" label="任务名称" prop="replaceitTitle">
          <el-input v-model="form.replaceitTitle" :disabled="formReadOnly" style="width: 200px;" placeholder="任务名称"/>
        </el-form-item>
        <el-form-item label="任务描述" prop="replaceitDesc">
          <el-input v-model="form.replaceitDesc" :disabled="formReadOnly" style="width: 400px;" placeholder="任务描述"/>
        </el-form-item>
        <el-form-item label="任务名称英文" prop="replaceitTitleEn">
          <el-input v-model="form.replaceitTitleEn" :disabled="formReadOnly" style="width: 200px;" placeholder="任务名称英文"/>
        </el-form-item>
        <el-form-item label="任务描述英文" prop="replaceitDescEn">
          <el-input v-model="form.replaceitDescEn" :disabled="formReadOnly" style="width: 400px;" placeholder="任务描述英文"/>
        </el-form-item>
        <el-form-item label="奖励积分" prop="replaceitPoint">
          <el-input v-model="form.replaceitScore" :disabled="formReadOnly" style="width: 200px;" placeholder="积分"/>
        </el-form-item>
        <el-form-item label="挂载点" prop="replaceitPoint">
          <el-select v-model="form.replaceitPoint" class="filter-item" placeholder="挂载事件">
            <el-option v-for="item in optEvent" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务周期" prop="missonPeriod">
          <el-select v-model="form.missonPeriod" class="filter-item" placeholder="任务周期">
            <el-option v-for="item in optPeriod" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')">确 定</el-button>
        <el-button v-if="dialogStatus=='update' && form.status==0" type="danger" @click="HandleDisableObj(form.replaceitId)">禁 用</el-button>
        <el-button v-if="dialogStatus=='update' && form.status==1" type="primary" @click="HandleActiveObj(form.replaceitId)">启 用</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  page,
  putObj,
  addObj,
  getObj,
  ActiveObj,
  DisableObj
} from '@/api/hmi/replaceit'
import { mapGetters } from 'vuex'
export default {
  name: 'replaceit',
  data() {
    return {
      form: {
        replaceitName: undefined,
        remark: undefined,
        firmware: undefined
      },
      rules: {
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        status: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      tableKey: 0,
      formReadOnly: false,
      optStatus: [{ id: 0, text: '启用' }, { id: 1, text: '禁用' }],
      optPeriod: [{ id: 0, text: '单次' }, { id: 1, text: '每日一次' }, { id: 2, text: '不限次数' }],
      optEvent: ['UserSignin', 'UserCloneProject', 'InvitedUserRegistered', 'UserShareProject', 'UserCommentProject', 'UserStarProject'],
      descPeriod: ['单次', '每日一次', '不限']
    }
  },
  computed: {
    ...mapGetters(['name', 'elements', 'uid'])
  },
  created() {
    this.getList()
  },
  methods: {
    genTimeDesc(time) {
      if (time) {
        return String(time).substr(0, 16)
      }
      return '-'
    },
    renderHeaderGXSH(h) {
      return [h('p', { class: 'tableHeader' }, ['创建人']), h('p', { class: 'tableHeader' }, ['创建时间'])]
    },
    getList() {
      console.log(this.listQuery)
      this.listLoading = true
      page(this.listQuery)
        .then(response => {
          this.list = response.data.list
          this.total = response.data.total
          this.listLoading = false
          console.log(this.list)
        }).catch((msg) => {
          this.listLoading = false
        })
    },
    HandleDisableObj(id) {
      this.form.status = 1
      DisableObj(id).then(response => {
        this.getList()
      })
    },
    HandleActiveObj(id) {
      this.form.status = 0
      ActiveObj(id).then(response => {
        this.getList()
      })
    },
    handleFilter() {
      console.log(this.listQuery)
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.formReadOnly = false
    },
    handleUpdate(row) {
      getObj(row.replaceitId)
        .then(response => {
          this.form = response.data
          this.dialogFormVisible = true
          this.formReadOnly = false
          this.dialogStatus = 'update'
        })
    },
    handleView(row) {
      getObj(row.replaceitId)
        .then(response => {
          this.form = response.data
          this.dialogFormVisible = true
          this.formReadOnly = true
          this.dialogStatus = 'view'
        })
    },
    create(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form)
            .then(() => {
              this.dialogFormVisible = false
              this.getList()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
        } else {
          return false
        }
      })
    },
    cancel(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    update(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          putObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    resetTemp() {
      this.form = {
        replaceitName: undefined,
        remark: undefined,
        firmware: undefined
      }
    }
  }
}
</script>
